@import '../../containers/Application/colors.scss';
@import './variables.scss';

$singleItemSelectionButtonBackgroundColor: $white;
$singleItemSelectionButtonColor: $dustyGray;
$singleItemSelectionButtonActiveColor: $white;
$singleItemSelectionButtonActiveBackgroundColor: $shakespeare;

.button {
    height: 100%;
    width: 28px;
    background-color: $singleItemSelectionButtonBackgroundColor;
    color: $singleItemSelectionButtonColor;
    border: none;
    cursor: pointer;
    font-size: 14px;

    &.left {
        border-right: 1px solid $singleItemSelectionBorderColor;

        &:hover {
            background-color: $singleItemSelectionButtonActiveBackgroundColor;
            border-color: $singleItemSelectionButtonActiveBackgroundColor;
            color: $singleItemSelectionButtonActiveColor;
        }
    }

    &.right {
        border-left: 1px solid $singleItemSelectionBorderColor;
    }

    &.has-options {
        .icon {
            margin-right: 5px;
        }

        width: 45px;
    }

    &:disabled {
        cursor: default;
        background-color: $singleItemSelectionDisabledBackgroundColor;

        &:hover {
            background-color: $singleItemSelectionDisabledBackgroundColor;
            border-color: $singleItemSelectionBorderColor;
            color: $singleItemSelectionButtonColor;
        }
    }
}
